<template>
  <div class="main">
    <!-- 面包屑到导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 输入框与添加按钮区域 -->
    <el-row :gutter="20" class="searchBox">
      <el-col :span="6">
        <el-input
          placeholder="请输入内容"
          v-model="queryInfo.query"
          class="input-with-select"
          clearable
          @clear="getGoodsList"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getGoodsList"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>
    <!-- 表格区域 -->
    <el-table
      :data="goodsList"
      style="width: 100%"
      border
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" width="55">
      </el-table-column>
      <el-table-column prop="name" label="商品" align="center" width="400">
        <template slot-scope="scope">
          <div class="good-box">
            <div class="left">
              <img :src="scope.row.defaultImage" alt="" />
            </div>
            <div class="right">
              <span class="spuName">{{ scope.row.name }}</span>
              <span class="descTxt">{{ scope.row.material }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="serialNo"
        label="商品id"
        align="center"
        sortable
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        align="center"
        sortable
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="inventory"
        label="库存数量"
        align="center"
        sortable
        width="120"
      >
      </el-table-column>
      <el-table-column
        prop="categoryName"
        label="分类"
        align="center"
        width="100"
      >
      </el-table-column>
      <el-table-column label="上架状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.publishStatus === 'on'">上架</el-tag>
          <el-tag type="success" v-else>下架</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        sortable
        prop="createdTime"
      >
        <template slot-scope="scope">
          {{ scope.row.createdTime | dateFormat }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="200">
        <template slot-scope="scope">
          <!-- 编辑按钮 -->
          <el-button
            type="success"
            icon="el-icon-edit"
            size="mini"
            @click="showEditDialog(scope.row.serialNo)"
          ></el-button>
          <!-- 上架下架 -->
          <el-button
            type="primary"
            icon="el-icon-download"
            size="mini"
            v-if="scope.row.publishStatus === 'on'"
            @click="updatePushStatusDown(scope.row.serialNo)"
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            v-else
            @click="updatePushStatusOn(scope.row.serialNo)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryInfo.pagenum"
      :page-sizes="[1, 2, 5, 10]"
      :page-size="queryInfo.pagesSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      drawerDetail: false,
      upCheck: false,
      downCheck: false,
      goodsList: [],
      queryInfo: { query: '', curPage: 1, pagesSize: 10 },
      total: 0,
    }
  },
  methods: {
    async getCategoryList() {
      await this.$http({
        url: this.$http.adornUrl('/mall/categoryinfo/tree'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.queryInfo.curPage,
          limit: this.queryInfo.pagesSize,
        }),
      }).then(({ data }) => {
        console.log(data)
        if (data && data.code === 0) {
          this.cateList = data.page.list
        } else {
          this.cateList = []
        }
      })
    },
    // 表格选中事件
    handleSelectionChang() {},
    getGoodsList() {
      this.$http({
        url: this.$http.adornUrl('/mall/spuinfo/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.queryInfo.curPage,
          limit: this.queryInfo.pagesSize,
          name: this.queryInfo.query,
        }),
      }).then((res) => {
        console.log(res)
        this.goodsList = res.data.page.list
        this.total = res.data.page.totalCount
      })
    },
    // 监听页面pagesize改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesSize = newSize
      this.getGoodsList()
    },
    // 监听页码值的改变
    handleCurrentChange(newPage) {
      this.queryInfo.curPage = newPage
      this.getGoodsList()
    },
    handleSelectionChange() {},
    // 编辑商品信息
    showEditDialog(serialNo) {
      this.$router.push({
        name: 'goods-goods-add',
        params: {
          spuNo: serialNo,
        },
      })
    },
    // 上架
    updatePushStatusOn(serialNo) {
      this.$http({
        url: this.$http.adornUrl('/mall/spuinfo/up'),
        method: 'post',
        data: [serialNo],
      }).then((res) => {
        console.log(res)
        if (res.data.code === 0) {
          this.$message.success('已上架')
          this.getGoodsList()
        }
      })
    },
    // 下架
    updatePushStatusDown(serialNo) {
      this.$http({
        url: this.$http.adornUrl('/mall/spuinfo/down'),
        method: 'post',
        data: [serialNo],
      }).then((res) => {
        if (res.data.code === 0) {
          this.$message.success('已下架')
          this.getGoodsList()
        }
      })
    },
  },
  created() {
    this.getCategoryList().then(() => {
      this.getGoodsList()
    })
  },
}
</script>
scss
<style lang="scss">
.main {
  .list-desc {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-box {
      display: flex;
      flex-direction: column;
      h3 {
        font-size: 14px;
        font-weight: 700;
      }
      p {
        display: flex;
        font-size: 12px;
        color: #666;
      }
    }
    .right-box {
      margin-right: 20px;
      display: flex;
      .addGoodsBtn {
        border-radius: 10px;
        display: flex;
        justify-content: center;
        background-color: #17b3a3;
        color: #fff;
        font-weight: 700;
        height: 40px;
        align-items: center;
        width: 120px;
        &:hover {
          background-color: #09c5b2;
        }
        .add {
          margin: 0 10px 0 0;
        }
      }
    }
  }
  .searchBox {
    margin: 20px 0;
  }
  .good-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .left {
      height: 60px;
      width: 60px;
      margin: 0 10px 0 0;
      border: 1px solid #fff;
      overflow: hidden;
      border-radius: 10px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;

      white-space: nowrap;
      -o-text-overflow: ellipsis;
      text-overflow: ellipsis;
      .spuName {
        font-size: 16px;
        font-weight: 700;
        display: flex;
      }
      .descTxt {
        display: flex;
        font-size: 14px;
        color: #555;
      }
    }
  }
}
</style>
